import React, {PureComponent} from "react"
import {MailOutlined, MobileOutlined} from '@ant-design/icons'
import {Alert, Button, Checkbox, Input, Form} from "antd"
import formCompose from "./compose"
import {regex_mobile} from "project-config"
import {withRouter} from "react-router"


export default @withRouter
@formCompose
class SmsLoginForm extends PureComponent {

  formRef = React.createRef()

  render() {

    const {
      _serverMessage, _submitting, _initData, onSubmit, onInputChange,
      sendSmsVerifyCode, _smsCodeRemainTime
    } = this.props

    return (
      <div className={'ld2-login-form'}>
        {
          !_serverMessage
            ? undefined
            : <Alert message={_serverMessage} type="error" showIcon className={'ld2-login-message'}/>
        }
        <Form className="login-form" ref={this.formRef} initialValues={_initData}>
          <Form.Item name={'phoneNo'}
                     rules={[
                       {required: true, message: '请输入注册手机号'},
                       {pattern: regex_mobile, message: '请输入一个正确的国内手机号',}
                     ]}>
            <Input size={'large'}
                   onChange={onInputChange}
                   onPressEnter={onSubmit}
                   prefix={<MobileOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                   placeholder="请输入手机号"/>
          </Form.Item>

          <Form.Item name={'smsCode'}
                     rules={[
                       {required: true, message: '请输入短信验证码'},
                       {pattern: /^\d{6}$/, message: '请输入一个6位数字验证码',}
                     ]}>
            <Input size={'large'}
                   className={'txt-sms'}
                   prefix={<MailOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                   onPressEnter={onSubmit}
                   placeholder="请输入短信验证码"/>
            <Button htmlType="submit"
                    size={'large'}
                    style={{width: '100px', fontSize: '14px'}}
                    type="link"
                    onClick={() => sendSmsVerifyCode(this.formRef.current)}
                    disabled={_smsCodeRemainTime !== 0}
                    className="login-form-button">
              {_smsCodeRemainTime > 0 ? `再次发送(${_smsCodeRemainTime})` : '获取验证码'}
            </Button>
          </Form.Item>
          <Form.Item style={{marginBottom: '0px'}}
                     name={'remember'}
                     valuePropName='checked'>
            <Checkbox>记住帐号</Checkbox>
          </Form.Item>
        </Form>
        <div>
          <Button size={'large'}
                  onClick={() => onSubmit(this.formRef.current)}
                  style={{width: '280px'}}
                  loading={_submitting}
                  type="primary"
                  htmlType="submit"
                  className="login-form-button">
            登录
          </Button>
        </div>
      </div>
    );
  }
}